<template>
  <div class="tree">
    <div class="toggle">
      <div class="sidebar">
        <ul>
          <li
            v-for="item in items"
            :key="item.id"
            @click="itemsClick(item.tab)"
            :class="{ active: currentTab === item.tab }"
          >
            {{ item.text }}
          </li>
        </ul>
      </div>
      <div class="container">
        <ul class="goods">
          <li v-for="item in goods" :key="item.id">
            <img :src="item.img_url" alt="" class="img" />
            <div>
              <p class="title">{{ item.name }}</p>
              <p class="month">月售：{{ item.sales }}</p>
              <p class="p_btn">
                <span class="new">￥{{ item.price }}</span
                >&nbsp;&nbsp;&nbsp;<span class="old"
                  >￥{{ item.oldPrice }}</span
                >
                <span
                  class="plus"
                  @click="changeItemToCart(shopId,item.id, item, 1)"
                  ><van-icon name="plus" color="white" size="16px" /></span
                >
                {{ cartList?.[shopId]?.[item.id]?.count || 0 }}
                <span
                  class="minus"
                  @click="changeItemToCart(shopId,item.id, item, -1)"
                  ><van-icon name="minus" color="#7643e1" size="16px" /></span
                >
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRoute } from "vue-router";
import { ref, toRefs, reactive, watchEffect } from "vue";
import { CommonCartEffect } from "./CommonCartEffect.js";
import request from "@/utils/request.js";

let route = useRoute();
const shopId = route.params.id;
const items = [
  {
    text: "全部商品",
    tab: "all",
  },
  {
    text: "新鲜水果",
    tab: "fruit",
  },
  {
    text: "休闲食品",
    tab: "food",
  },
  {
    text: "时令蔬菜",
    tab: "greens",
  },
  {
    text: "肉蛋家禽",
    tab: "meat",
  },
];
// tab切换相关逻辑
const useTabEffect = () => {
  // 匹配tab标签
  const currentTab = ref(items[0].tab);
  const itemsClick = (tab) => {
    currentTab.value = tab;
  };
  return { currentTab, itemsClick };
};
// 列表内容相关逻辑
const useListEffect = (currentTab) => {
  const data = reactive({ goods: [] });
  async function getContentData() {
    // 获得相应店铺Id的商品列表
    const result = await request.get(`/api/v1/product/${shopId}`, {
      tab: currentTab.value,
    });
    if (result.msg === "ok") {
      data.goods = result.data;
    }
  }
  watchEffect(() => {
    getContentData();
  });
  const { goods } = toRefs(data);
  return { goods };
};
// 购物车相关逻辑
const { cartList, changeItemToCart } = CommonCartEffect();
const { currentTab, itemsClick } = useTabEffect();
const { goods } = useListEffect(currentTab);
</script>

<style lang="scss" scoped>
.tree {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  .toggle {
    display: flex;
    .sidebar {
      width: 25%;
      background-color: #f4f4f4;
      height: 100%;
      ul {
        list-style-type: none;
        padding: 0;
        li {
          height: 40px;
          line-height: 40px;
          text-align: center;
          cursor: pointer;
          position: relative;
        }
      }
    }
    .active {
      background-color: white;
    }
    .active::before {
      content: "";
      width: 5px;
      height: 20px;
      background-color: #7643e1;
      position: absolute;
      left: -1px;
      top: 10px;
    }
    .container {
      width: 75%;
      height: 465px;
      overflow: auto;
      .goods {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        > li {
          display: flex;
          align-items: center;
          height: 100px;
          border-bottom: 1px solid #f8f8f8;
          > .img {
            width: 55px;
            height: 55px;
            margin-left: 10px;
          }

          > div {
            display: flex;
            flex-direction: column;
            margin-left: 8px;
            justify-content: space-between;
            .p_btn {
              width: 180px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              line-height: 25px;
            }
            .title {
              font-size: 16px;
              color: #333333;
            }
            .month {
              font-size: 13px;
              margin-top: 5px;
              color: #333333;
            }
            .old {
              font-size: 10px;
              margin-top: 5px;
              color: #a6a6a6;
              line-height: 25px;
              margin-left: -25px;
              text-decoration: line-through;
            }
            .new {
              font-size: 13px;
              margin-top: 5px;
              color: red;
              line-height: 25px;
            }
            .plus,
            .minus {
              border-radius: 50%;
              width: 20px;
              height: 20px;
              text-align: center;
              line-height: 20px;
              font-size: 16px;
              margin-bottom: 5px;
            }
            .plus {
              background-color: #7643e1;
              color: white;
            }
            .minus {
              border: 1px solid #727272;
              color: #727272;
            }
          }
        }
      }
    }
  }
}
</style>
